How to add new ListItem to DropDownList control using jQuery?

Sometimes, we will require adding new ListItem or option to an ASP.Net DropDownList control from client side. This little code snippet will help us to do the same using jQuery.

To integrate jQuery in asp.net project, please read my previous article,
Using JQuery in ASP.Net AJAX Applications - Part 1

Consider, we have a DropDownList control with ID "ddlCities". To add a new ListItem,

$("#ddlCities").append("<option value="1 ">"Bangalore"</option>");

OR

$("#ddlCities").append($("<option></option>").val("0").html("Bangalore"));

Adding new options in client will give the following exception on the subsequent postbacks.

Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

To resolve this, follow my article, Using JavaScript Effectively in ASP.Net 2.0 â€" PART 2